const count = 10;
function text() {
  return `jick`;
}

const list = [
  { id: 1001, name: "Vue" },
  { id: 1002, name: "React" },
  { id: 1003, name: "Angular" },
];

const isLogin = true;

const articleType = 0;
function showArticle() {
  if (articleType == 0) {
    return <div>我是{articleType}图模式</div>;
  }
  if (articleType == 1) {
    return <div>我是{articleType}图模式</div>;
  }

  if (articleType == 2) {
    return <div>我是{articleType}图模式</div>;
  }
}

function App() {
  const handleClick = (e) => {
    console.log(e);
    console.log("button 被点击了");
  };

  const handleClickQuery = (e, type) => {
    console.log(e);
    console.log(type, "是传过来的");
  };

  return (
    <div className="App">
      <h1>This is App</h1>
      <h2>This is JSX</h2>
      {"This is message"}-{count} - {text()} - {new Date().getDate()}
      <div style={{ color: "red", fontSize: "20px" }}>this is div</div>
      <h2>This is 循环渲染</h2>
      {/* map，key */}
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <h2>This is 条件渲染</h2>
      {isLogin && <div>你好</div>}
      {isLogin ? <div>你好</div> : <div>我好</div>}
      {showArticle()}
      <h2>事件绑定</h2>
      <button onClick={handleClick} style={{ marginRight: "15px" }}>
        点击-事件对象e
      </button>
      <button onClick={(e) => handleClickQuery(e, "jack")}>点击-传参数</button>
    </div>
  );
}

export default App;
